<template>
  <div class="purchase-return-entry">
    <div class="date-range-search">
      <el-form :inline="true" class="search-form">
        <el-form-item label="单据号或供应商或备注">
          <el-input v-model="searchQuery" placeholder="请输入单据号或供应商或备注"></el-input>
        </el-form-item>
        <el-form-item label="日期:">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator=" - "
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="付款状态:">
          <el-select v-model="orderStatus" placeholder="请选择">
            <el-option label="全部" value=""></el-option>
            <el-option label="未退款" value="未退款"></el-option>
            <el-option label="部分退款" value="部分退款"></el-option>
            <el-option label="全部退款" value="全部退款"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核状态:">
          <el-select v-model="orderStatus" placeholder="请选择">
            <el-option label="空" value=""></el-option>
            <el-option label="未审核" value="未审核"></el-option>
            <el-option label="已审核" value="已审核"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="退货状态:">
          <el-select v-model="orderStatus" placeholder="请选择">
            <el-option label="全部" value=""></el-option>
            <el-option label="未退货" value="未退货"></el-option>
            <el-option label="部分退货" value="部分退货"></el-option>
            <el-option label="全部退货" value="全部退货"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="仓库:">
          <el-input v-model="warehouse" placeholder="请输入仓库"></el-input>
        </el-form-item>
        <el-button style="margin-left: -10px;" @click="dialogVisible3 = true">...</el-button>
        <el-form-item label="商品:">
          <el-input v-model="product" placeholder="请输入商品"></el-input>
        </el-form-item>
        <el-button style="margin-left: -10px;" @click="dialogVisible2 = true">...</el-button>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="advancedSearch">高级搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
 
    <el-divider></el-divider>
    
    <div class="actions">
      <el-button type="primary" @click="goto('ReturnOrder')">新增</el-button>
      <el-button type="success" >审核</el-button>
      <el-button type="warning" >反审核</el-button>
      <el-button type="primary">导入</el-button>
      <el-button>导出</el-button>
      <el-button type="primary">启用</el-button>
      <el-button type="warning">关闭</el-button>
      <el-button type="danger">删除</el-button>
    </div>

    <el-table
      :data="orders"
      border
      style="width: 100%; font-size: 13px; margin-left: 20px;"
      show-summary>
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="操作"
        width="55"
        >
        <template>
          <i class="el-icon-edit"></i>
          <i class="el-icon-delete"></i>
        </template>
      </el-table-column>
      <el-table-column
        prop="orderDate"
        label="单据日期"
        width="200">
      </el-table-column>
      <el-table-column
        prop="orderNumber"
        label="单据编号"
        width="200">
      </el-table-column>
      <el-table-column
        prop="businessType"
        label="业务类别"
        width="200">
      </el-table-column>
      <el-table-column
        prop="supplier"
        label="供应商"
        width="250">
      </el-table-column>
      <el-table-column
        prop="salesperson"
        label="业务员">
      </el-table-column>
      <el-table-column
        prop="purchaseOrderNumber"
        label="关联购货订单号">
      </el-table-column>
      <el-table-column
        prop="purchaseAmount"
        label="购货金额">
      </el-table-column>
      <el-table-column
        prop="returntype"
        label="付款状态">
      </el-table-column>
      <el-table-column
        prop="returntype"
        label="退货状态">
      </el-table-column>
      <el-table-column
        prop="buyprice"
        label="采购费用">
      </el-table-column>
      <el-table-column
        prop="purchaseAmount"
        label="已付款">
      </el-table-column>
      <el-table-column
        prop="quantity"
        label="数量">
      </el-table-column>
      <el-table-column
        prop="orderStatus"
        label="订单状态">
      </el-table-column>
      <el-table-column
        prop="creator"
        label="制单人">
      </el-table-column>
      <el-table-column
        prop="creationTime"
        label="制单时间"
        width="200">
      </el-table-column>
      <el-table-column
        prop="remarks"
        label="备注">
      </el-table-column>
      <el-table-column
        prop="deliveryMethod"
        label="交货方式">
      </el-table-column>
      <el-table-column
        prop="wu"
        label="关联物流单号">
      </el-table-column>
      <el-table-column
        prop="wu"
        label="关联退货单号">
      </el-table-column>
    </el-table>
    <el-pagination style="position: absolute;left: 700px;" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]"
      :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
    </el-pagination>

    <el-dialog
      title="商品库存查询"
      :visible.sync="dialogVisible3"
      width="700px">
      <div>
        <el-input
          v-model="productName"
          disabled
          placeholder="商品名称或编号">
        </el-input>

        <el-table
          :data="inventoryData"
          style="width: 100%">
          <el-table-column
            prop="warehouse"
            label="仓库名称">
          </el-table-column>
          <el-table-column
            prop="quantity"
            label="数量">
          </el-table-column>
        </el-table>

        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="4"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalItems">
          </el-pagination>
        </div>

        <div class="dialog-footer">
          <el-button type="primary" @click="confirm">确认</el-button>
          <el-button @click="closeDialog">关闭</el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog title="选择商品" :visible.sync="dialogVisible2" width="80%">
      <div>
        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
          <el-tab-pane label="商品" name="products"></el-tab-pane>
          <el-tab-pane
            label="近期交易"
            name="recent-transactions">
          </el-tab-pane>
        </el-tabs>

        <div class="search-bar">
          <el-input
            style="width: 200px"
            placeholder="请输入商品编号/名称/型号/品牌"
            v-model="searchQuery">
          </el-input>
          仓库：
          <el-select v-model="selectedWarehouse" placeholder="仓库">
            <el-option label="空" value=""></el-option>
            <!-- 其他仓库选项可以动态生成 -->
          </el-select>
          <el-checkbox v-model="zeroInventory">零库存商品</el-checkbox>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="常用商品">常用商品</el-button>
        </div>

        <div class="content-wrapper">
          <el-row type="flex" justify="space-between">
            <el-col :span="16">
              <el-table :data="products" style="width: 100%">
                <el-table-column type="expand" label="图片" width="180">
                  <template slot-scope="scope">
                    <img :src="scope.row.imageUrl" alt="商品图片" style="width: 100%;">
                  </template>
                </el-table-column>
                <el-table-column prop="productNumber" label="商品编号"></el-table-column>
                <el-table-column prop="brand" label="品牌"></el-table-column>
                <el-table-column prop="origin" label="产地"></el-table-column>
                <el-table-column prop="auxiliaryAttributeNumber" label="辅助属性编号"></el-table-column>
                <el-table-column prop="productName" label="商品名称"></el-table-column>
                <el-table-column prop="specification" label="规格型号"></el-table-column>
                <el-table-column prop="category" label="商品类别"></el-table-column>
                <el-table-column prop="attributes" label="属性"></el-table-column>
                <el-table-column prop="unit" label="单位"></el-table-column>
                <el-table-column prop="basicStock" label="库存基本数"></el-table-column>
                <el-table-column prop="availableStock" label="可用库存"></el-table-column>
                <el-table-column prop="entryQuantity" label="录入数量"></el-table-column>
                <el-table-column prop="remarks" label="备注"></el-table-column>
              </el-table>
            </el-col>
            <el-col :span="8">
              <el-tree
                :data="categories"
                :props="defaultProps"
                style="width: 100%">
              </el-tree>
            </el-col>
          </el-row>
        </div>
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20, 50, 100]"
            :page-size="20"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalProducts">
          </el-pagination>
        </div>

        <div class="actions">
          <el-button type="primary" @click="selectProduct">选中</el-button>
          <el-button @click="selectAndClose">选中并关闭</el-button>
          <el-button @click="closeDialog">关闭</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      dateRange: [],
      orderStatus: '',
      auditStatus: '',
      warehouse: '',
      product: '',
      dialogVisible3: false,
      dialogVisible2: false,
      activeTab: 'products',
      selectedWarehouse: '',
      zeroInventory: false,
      categories: [
      {
        id: 1,
        label: '食品',
        children: [
          {
            id: 2,
            label: '饮料'
          },
          {
            id: 3,
            label: '零食'
          }
        ]
      },
      {
        id: 4,
        label: '日用品',
        children: [
          {
            id: 5,
            label: '清洁用品'
          },
          {
            id: 6,
            label: '个人护理'
          }
        ]
      }
    ],
      currentPage4:3,
      totalProducts: 0,
      supplier: '',
      salesperson: '',
      documentDate: '',
      shippingAddress: '',
      orders: [
      {
        orderDate: '2024-12-17',
        orderNumber: 'GHDD20241217002',
        businessType: '购货',
        supplier: 'G00002 金小蝶食品贸易有限公司',
        salesperson: '购货-小李',
        purchaseOrderNumber: 'PO001',
        salesOrderNumber: 'SO001',
        purchaseAmount: 241870.00,
        returntype:'全部付款',
        buyprice:0,
        quantity: 5000,
        orderStatus: '已审核',
        creator: '张三',
        creationTime: '2024-12-17 10:00:00',
        remarks: '无',
        deliveryMethod: '快递',
        wu:'a001'
      },
      {
        buyprice:0,
        orderDate: '2024-12-17',
        orderNumber: 'GHDD20241217002',
        businessType: '购货',
        supplier: 'G00002 金小蝶食品贸易有限公司',
        salesperson: '购货-小李',
        purchaseOrderNumber: 'PO001',
        salesOrderNumber: 'SO001',
        returntype:'全部付款',
        purchaseAmount: 241870.00,
        quantity: 5000,
        orderStatus: '已审核',
        creator: '张三',
        creationTime: '2024-12-17 10:00:00',
        remarks: '无',
        deliveryMethod: '快递',
        wu:'a001'
      },
    ],
      productName: '',
      inventoryData: [
      {
        warehouse: '默认仓库',
        quantity: 120
      },
      {
        warehouse: '冷藏库',
        quantity: 50
      },
      {
        warehouse: '食品库',
        quantity: 30
      },
      {
        warehouse: '合计',
        quantity: 200
      }
    ],
      currentPage: 1,
      totalItems: 100,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      products: [
      {
        productNumber: 'P001',
        brand: '品牌A',
        origin: '产地X',
        auxiliaryAttributeNumber: 'A001',
        productName: '商品名称A',
        specification: '规格A',
        category: '食品',
        attributes: '属性A',
        unit: '件',
        basicStock: 100,
        availableStock: 80,
        entryQuantity: 20,
        remarks: '备注A',
        imageUrl: 'http://example.com/imageA.jpg'
      },
      {
        productNumber: 'P002',
        brand: '品牌B',
        origin: '产地Y',
        auxiliaryAttributeNumber: 'B001',
        productName: '商品名称B',
        specification: '规格B',
        category: '日用品',
        attributes: '属性B',
        unit: '瓶',
        basicStock: 200,
        availableStock: 150,
        entryQuantity: 50,
        remarks: '备注B',
        imageUrl: 'http://example.com/imageB.jpg'
      }
      // 更多商品数据...
    ]
    };
  },
  methods: {
    search() {
      console.log('查询条件：', this.searchQuery, this.dateRange, this.orderStatus, this.auditStatus, this.warehouse, this.product);
    },
    advancedSearch() {
      // 高级搜索逻辑
    },
    saveAndAdd() {
      console.log('保存并新增');
    },
    audit() {
      console.log('审核');
    },
    handleSizeChange(val) {
      // 分页大小改变时的逻辑
    },
    handleCurrentChange(val) {
      // 当前页码改变时的逻辑
    },
    handleTabClick(tab) {
      // 选项卡点击时的逻辑
    },
    selectProduct() {
      // 选中商品的逻辑
    },
    selectAndClose() {
      // 选中商品并关闭对话框的逻辑
      this.dialogVisible2 = false;
    },
    closeDialog() {
      // 关闭对话框的逻辑
      this.dialogVisible2 = false;
      this.dialogVisible3 = false;
    },
    confirm() {
      // 确认按钮的逻辑
    },
    goto(to) {
      this.$router.push(to)
    }
  }
};
</script>

<style scoped>
.search-form {
  margin-bottom: 20px;
}

.actions {
  margin-top: 20px;
  text-align: right;
  margin-bottom: 10px;
}

.search-form .el-button {
  margin-left: 10px;
}
</style>
